@mixin hinge() {
  .fx-hinge {
    @include prefixer(animation-duration, 2s);
    @include animation-name(hinge);
  }
  @include keyframes(hinge) {
    0% {
      @include transform-origin(top left);
      @include animation-timing-function(ease-in-out);
    }
    20%, 60% {
      @include transform(rotate3d(0, 0, 1, 80deg));
      @include transform-origin(top left);
      @include animation-timing-function(ease-in-out);
    }
    40%, 80% {
      @include transform(rotate3d(0, 0, 1, 60deg));
      @include transform-origin(top left);
      @include animation-timing-function(ease-in-out);
      opacity: 1;
    }
    100% {
      @include transform(translate3d(0, 700px, 0));
      opacity: 0;
    }
  }
}

@mixin rollIn() {
  .fx-rollIn {
    @include animation-name(rollIn);
  }
  @include keyframes(rollIn) {
    0% {
      opacity: 0;
      @include transform(translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg));
    }
    100% {
      opacity: 1;
      @include transform(none);
    }
  }
}

@mixin rollOut() {
  .fx-rollOut {
    @include animation-name(rollOut);
  }
  @include keyframes(rollOut) {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      @include transform(translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg));
    }
  }
}
